// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

// This file should *only* be @imported from root-level SCSS files, *not* individual SCSS modules.
//
// SCSS modules should instead use /common/styles/colors.scss.
//
// If an SCSS module @imports this, the styles will be repeated once per @importing module in the
// final packed .css file, which causes perf issues (especially with Chromium's dev tools).

:root {
    // Consistent colors; these don't vary with high-contrast mode. Use sparingly.
    --black: #000;
    --light-black: #161616;
    --white: #fff;
    --brand-blue: #004880;
    --grey: #333;

    // Accessibility Insights brand color
    --ada-brand-color: var(--brand-blue);

    // Text colors
    --primary-text: rgb(0 0 0 / 90%);
    --secondary-text: rgb(0 0 0 / 70%);
    --disabled-text: rgb(0 0 0 / 38%);

    // UI colors
    --communication-primary: #106ebe;
    --communication-tint-40: #eff6fc;
    --communication-tint-30: #deecf9;
    --communication-tint-20: #c7e0f4;
    --communication-tint-10: #2b88d8;
    --communication-shade-20: #004578;

    // Neutral surfaces
    --neutral-0: var(--white);
    --neutral-2: #f8f8f8;
    --neutral-3: #f6f6f6;
    --neutral-4: #f4f4f4;
    --neutral-6: #f2f2f2;
    --neutral-6-5: #f1f1f1;
    --neutral-8: #ebebeb;
    --neutral-10: #dedede;
    --neutral-20: #c8c8c8;
    --neutral-30: #a6a6a6;
    --neutral-55: #6e6e6e;
    --neutral-60: #666;
    --neutral-70: #3c3c3c;
    --neutral-80: var(--grey);
    --neutral-100: var(--black);
    --neutral-alpha-2: rgb(0 0 0 / 2%);
    --neutral-alpha-4: rgb(0 0 0 / 4%);
    --neutral-alpha-6: rgb(0 0 0 / 6%);
    --neutral-alpha-8: rgb(0 0 0 / 8%);
    --neutral-alpha-10: rgb(0 0 0 / 10%);
    --neutral-alpha-20: rgb(0 0 0 / 20%);
    --neutral-alpha-30: rgb(0 0 0 / 30%);
    --neutral-alpha-60: rgb(0 0 0 / 60%);
    --neutral-alpha-70: rgb(0 0 0 / 70%);
    --neutral-alpha-80: rgb(0 0 0 / 80%);
    --neutral-alpha-90: rgb(0 0 0 / 90%);

    // Outcome colors
    --positive-outcome: #228722;
    --negative-outcome: #cd4a45;
    --neutral-outcome: var(--neutral-60);

    // Additional colors
    --box-shadow-108: rgb(0 0 0 / 10.8%);
    --box-shadow-132: rgb(0 0 0 / 13.2%);
    --box-shadow-27: rgb(0 0 0 / 27%);
    --screenshot-image-outline: #8b8b8b;
    --card-border: transparent;
    --card-footer-border: var(--neutral-10);
    --header-bar-title-color: var(--neutral-0);
    --help-links-section-background: var(--neutral-4);
    --help-links-section-border: var(--neutral-4);
    --index-circle-background: var(--communication-primary);
    --link-hover: var(--communication-shade-20);
    --link: var(--communication-primary);
    --menu-border: var(--neutral-3);
    --menu-item-background-active: var(--neutral-alpha-8);
    --menu-item-background-hover: var(--neutral-alpha-4);
    --left-nav-icon: var(--neutral-55);
    --pill-background: var(--neutral-alpha-8);
    --pill: var(--primary-text);
    --spinner-text: var(--communication-primary);
    --nav-link-hover: var(--neutral-alpha-8);
    --nav-link-selected: var(--communication-tint-20);
    --nav-link-expanded: var(--communication-tint-40);
    --insights-button-hover: #0179d4;
    --report-footer-text: #222;

    // Landmark colors
    --landmark-contentinfo: #00a88c;
    --landmark-main: #cb2e6d;
    --landmark-complementary: #6b9d1a;
    --landmark-banner: #d08311;
    --landmark-region: #2560e0;
    --landmark-navigation: #9b38e6;
    --landmark-search: #d363d8;
    --landmark-form: #0298c7;

    .high-contrast-theme {
        // Accessibility Insights brand color
        --ada-brand-color: var(--white);

        // Text colors
        --secondary-text: var(--white);
        --primary-text: var(--white);
        --disabled-text: #c285ff;

        // UI colors
        --communication-tint-40: #38a9ff;
        --communication-tint-30: var(--communication-tint-10);

        // Base
        --neutral-0: var(--light-black);
        --neutral-2: var(--light-black);
        --neutral-3: var(--light-black);
        --neutral-4: var(--light-black);
        --neutral-6: var(--light-black);
        --neutral-6-5: var(--light-black);

        // 8 being "lighter" than 10 in high-contrast is intended based on current usage
        --neutral-8: var(--white);
        --neutral-10: var(--light-black);
        --neutral-20: var(--white);
        --neutral-30: var(--white);
        --neutral-55: var(--white);
        --neutral-60: var(--white);
        --neutral-70: var(--white);
        --neutral-80: var(--white);
        --neutral-100: var(--white);
        --neutral-alpha-8: var(--white);
        --neutral-alpha-90: var(--white);

        // Outcome colors
        --positive-outcome: #4ac94a;
        --negative-outcome: #fc7ab1;
        --neutral-outcome: var(--neutral-0);

        // Additional colors
        --card-border: var(--white);
        --card-footer-border: var(--white);
        --header-bar-title-color: var(--brand-blue);
        --help-links-section-background: transparent;
        --help-links-section-border: var(--white);
        --index-circle-background: var(--communication-tint-40);
        --link-hover: #ff0;
        --link: #ff0;
        --menu-border: var(--grey);
        --menu-item-background-active: var(--communication-tint-40);
        --menu-item-background-hover: var(--grey);
        --left-nav-icon: var(--black);
        --pill-background: var(--white);
        --pill: var(--black);
        --screenshot-image-outline: var(--white);
        --spinner-text: var(--communication-tint-40);
        --nav-link-hover: #2a2a2a;
        --nav-link-selected: var(--communication-tint-40);
        --nav-link-expanded: transparent;
    }
}
